<template>
	<view class="index">
		<view>
			<NavBar title="我的钻石"> </NavBar>
		</view>
		<view class="diamond">
			<view class="diamondImg">
				<image src="@/static/img/myDiamond.png" mode="widthFix"></image>
			</view>
			<view class="diamondNumber">
				<view class="number">
					{{diamondNumber}}
				</view>
				<view class="describe">
					我的钻石
				</view>
			</view>
		</view>
		<view class="recharge">
			钻石充值
		</view>
		<view class="rechargeOption">
			<view v-for="(item,index) in rechargeArr" :key="index"
				:class="index == 2 || index ==  5 ? 'rechargeOptionItem marNone': 'rechargeOptionItem'">
				<view class="number">
					{{item.number}}
				</view>
				<view class="amount">
					{{item.amount}}
				</view>
			</view>
		</view>
		<!-- 立即充值 -->
		<view class="rechargeBox">
			<view class="rechargeBtn">
				立即充值
			</view>
		</view>
		<!-- 协议 -->
		<view class="tips">
			<image src="@/static/img/kong.png" mode="widthFix"></image>
			<text>已阅读并同意<text class="link">充值协议</text>和<text class="link">充值安全提示</text></text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import NavBar from "@/components/navBar.vue";
	const diamondNumber = ref<number>(0)

	const rechargeArr = ref([
		{ number: '10钻', amount: '1元' },
		{ number: '50钻', amount: '1元' },
		{ number: '200钻', amount: '1元' },
		{ number: '500钻', amount: '1元' },
		{ number: '800钻', amount: '1元' },
		{ number: '自定义', amount: '最低可充1元' },
	])
</script>

<style lang="scss">
	.index {
		height: 100vh;
		background-color: #f4f6fa;

		.diamond {
			margin-top: 74rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.diamondImg {
				height: 180rpx;

				image {
					width: 180rpx;
				}
			}

			.diamondNumber {
				width: 101rpx;
				height: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.number {
					font-size: 36rpx;
					color: #262626;
				}

				.describe {
					font-size: 24rpx;
					color: #8C8C8C;
				}
			}
		}

		.recharge {
			padding-left: 48rpx;
			height: 48rpx;
			margin: 40rpx 0 24rpx;
			font-size: 32rpx;
			color: #262626;
			font-weight: 600;
		}

		.rechargeOption {
			padding: 0 32rpx;
			display: flex;
			flex-wrap: wrap;

			.rechargeOptionItem {
				width: 213rpx;
				height: 154rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 0 22rpx 22rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.number {
					font-size: 32rpx;
					color: #262626;
				}

				.amount {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #BFBFBF;
				}
			}

			.marNone {
				margin-right: 0;
			}
		}

		.rechargeBox {
			margin: 120rpx 0 24rpx;
			height: 96rpx;
			padding: 8rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.rechargeBtn {
				width: 560rpx;
				height: 80rpx;
				background: #FF263F;
				border-radius: 40rpx;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.tips {
			padding: 0 103rpx 0 104rpx;
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				margin-right: 16rpx;
			}

			.link {
				color: #1188ff;
			}
		}



	}
</style>